<template>
  <div>
    <!-- 商品明细表格 -->
    <vxe-table
      border
      stripe
      ref="detailTable"
      size="small"
      header-align="center"
      :data="detailTableData"
      scroll-x="auto"
      class="split-table"
    >
      <vxe-column type="seq" title="序号" width="60" fixed="left"></vxe-column>
      <vxe-column field="productCode" title="配货单号" width="140" fixed="left" align="center"></vxe-column>
      <vxe-column field="orderCode" title="订单编号" width="140" fixed="left" align="center"></vxe-column>
      <vxe-column field="platformOrderCode" title="平台单号" width="140" align="center"></vxe-column>
      <vxe-column field="itemCode" title="商品编码" width="120" align="center"></vxe-column>
      <vxe-column field="itemName" title="商品名称" width="140" align="center"></vxe-column>
      <vxe-column field="imageUrl" title="图片" width="80" align="center">
        <template slot-scope="{ row }">
          <img v-if="row.imageUrl" :src="row.imageUrl" alt="图片" style="width:40px;height:40px;object-fit:contain;" />
        </template>
      </vxe-column>
      <vxe-column field="specInfo" title="规格信息" width="120" align="center"></vxe-column>
      <vxe-column field="isPreorder" title="预售" width="80" align="center">
        <template slot-scope="{ row }">{{ row.isPreorder ? '是' : '否' }}</template>
      </vxe-column>
      <vxe-column field="outOfStock" title="缺货" width="80" align="center">
        <template slot-scope="{ row }">{{ row.outOfStock ? '是' : '否' }}</template>
      </vxe-column>
      <vxe-column field="expectDeliveryTime" title="预计发货时间" width="140" align="center"></vxe-column>
      <vxe-column field="warehouseName" title="仓库名称" width="120" align="center"></vxe-column>
      <vxe-column field="allowNegativeStock" title="允许负库存" width="100" align="center">
        <template slot-scope="{ row }">{{ row.allowNegativeStock ? '是' : '否' }}</template>
      </vxe-column>
      <vxe-column field="isGift" title="赠品" width="80" align="center">
        <template slot-scope="{ row }">{{ row.isGift ? '是' : '否' }}</template>
      </vxe-column>
      <vxe-column field="platformItemCode" title="平台商品编码" width="140" align="center"></vxe-column>
      <vxe-column field="platformItemName" title="平台商品名称" width="140" align="center"></vxe-column>
      <vxe-column field="platformSpecInfo" title="平台商品规格信息" width="140" align="center"></vxe-column>
      <vxe-column field="qty" title="数量" width="100" align="center"></vxe-column>
      <vxe-column field="deliveryQty" title="已配货数" width="100" align="center"></vxe-column>
      <vxe-column field="canDeliveryQty" title="可配数" width="100" align="center"></vxe-column>
      <vxe-column field="price" title="实际单价" width="100" align="center"></vxe-column>
      <vxe-column field="amount" title="实际金额" width="120" align="center"></vxe-column>
      <vxe-column field="rcvInfo" title="收货信息" width="200" align="center" show-overflow></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import { getPrepareItems } from '@/api/mes/sales/prepare';
export default {
  name: "ItemDetail",
  props: {
    deliveryOrderId: {
      type: [Number, String],
      default: null
    }
  },
  data() {
    return {
      detailTableData: [],
      giftDialog: {
        visible: false,
        giftList: [],
        selected: []
      },
    };
  },
  watch: {
    deliveryOrderId: {
      handler(newVal) {
        if (newVal && newVal !== null) {
          this.getDetailList();
        } else {
          this.detailTableData = [];
        }
      },
      immediate: true
    }
  },
  methods: {
    getDetailList() {
      getPrepareItems(this.deliveryOrderId).then(response => {
        this.detailTableData = response.data;
      });
    },
  }
};
</script>

<style scoped>
.mb8 {
  margin-bottom: 8px;
}
  .split-table{
    max-height: 500px;
    overflow-y: auto;
  }
</style>
